<template>
  <!-- 暗灰色圆圈浮动 -->
  <div class="infoBox blackBox container-fluid">
    <div class="row justify-content-center">
      <div class="col-9 ">
        <!-- title盒子 -->
        <div class="row justify-content-center">
          <div class="col-12 titleBox" v-html="result.head">
            {{result.head}}
          </div>
        </div>
        <!-- 选项盒子 -->
        <div class="row justify-content-md-between justify-content-center">
          <!-- 单个详情 -->
          <div class="col-md-3 col-11 detailBox" v-for="item in result.info" :key="item.id">
            <div class="imgBox">
              <img :src="item.imgUrl" />
            </div>
            <p>{{item.info}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      "result": {
        "head": "<p class='title'>高性能</p><p>Cershop采用异步消息队列、分布式缓存、静态页面等技术</p><p>使性能大幅提升单机可达1000并发，集群部署可高达10000+并发</p>",
        "info": [
          { "id": 0, "imgUrl": "http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/1feab404-08fd-4c7b-9edd-c3561664237d.png", "info": "异步消息队列" },
          { "id": 1, "imgUrl": "http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/1feab404-08fd-4c7b-9edd-c3561664237d.png", "info": "分布式缓存" },
          { "id": 2, "imgUrl": "http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/1feab404-08fd-4c7b-9edd-c3561664237d.png", "info": "静态页面" },
        ]
      }
    }
  }
}
</script>

<style scoped>
.titleBox >>> .title {
  font-size: 48px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
</style>

<style lang="less" scoped>
.infoBox {
  padding: 7.44rem 0;
  .titleBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    p {
      text-align: center;
    }
    .title {
      font-size: 48px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    p:nth-child(3) {
      padding: 0 0;
      margin: 0 0;
    }
  }
  .detailBox {
    cursor: pointer;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .imgBox {
      position: relative;
      transition: all 0.6s;
      width: 100%;
      img {
        width: 100%;
      }
      p {
        margin: 0 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #ffffff;
        position: absolute;
        font-size: 2.25rem;
      }
    }
    .imgBox:hover {
      margin-top: -2.5rem;
      p {
        text-decoration: underline;
      }
    }
    p {
      white-space: nowrap;
      text-align: center;
      margin-top: 2rem;
      font-size: 1.13rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
}
.blackBox {
  background-color: #f7f7f7;
  .imgBox {
    transition: all 0.5s;
    width: 17rem !important;
    height: 17rem !important;
    border-radius: 50%;
    text-align: center;
    line-height: 17rem;
    img {
      width: 80% !important;
    }
  }
  .imgBox:hover {
    margin: 0 0 !important;
    box-shadow: 0px 5px 20px 0px rgba(51, 51, 51, 0.15);
    // background-color: #ffffff;
  }
}
</style>